<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>使用proxy进行双向数据绑定，监听数组元素的变化</title>
</head>
<body>
  <ul id="list"></ul>
  <button onClick="add()">add</button>
  <button onClick="minus()">minus</button>
  <script>
    let proxy = {}
    let obj = {
      array: [1, 2, 3]
    }
    // proxy的set操作处理器
    let handler = {
      set (target, key, value) {
        // 对数组进行操作，然后对页面进行渲染
        Reflect.set(target, key, value)
        showArray()
        return true
      }
    }
    // 页面渲染数据对应的节点
    function showArray () {
      let ul = document.getElementById('list')
      ul.innerHTML = ''
      for (let value of obj.array) {
        let li = document.createElement('li')
        let text = document.createTextNode(value)
        li.append(text)
        ul.append(li)
      }
      // 给数组添加代理对象
      proxy = new Proxy(obj.array, handler)
    }

    // 增加数组元素
    function add () {
      proxy.push(Math.random()) // 操作数据完成了DOM节点的变换，并且对数据元素的内容变换完成了监听
    }
    // 减少末尾的一个数据
    function minus () {
      proxy.pop()
    }
    // 初始化页面
    showArray()
  </script>
</body>
</html>